<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ $game->game_name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/scss/juheh5.scss', 'resources/js/juheh5.js', 'resources/js/vuecomponents/components.js'])
</head>

<body>
    <div class="container" id="vapp">
        <div class="main-container">
            <template v-if="params.currentComponent === 'FastLogin'">
                <juheh5-fast-login v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'AccountSelectLogin'">
                <juheh5-account-select-login v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'PhoneReg'">
                <juheh5-phone-reg v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'AccountReg'">
                <juheh5-account-reg v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'FastReg'">
                <juheh5-fast-reg v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'Login'">
                <juheh5-login v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'BindPhone'">
                <juheh5-bind-phone v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'RetrievePassword'">
                <juheh5-retrieve-password v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'IdcardAuthenticate'">
                <juheh5-idcard-authenticate v-model="params" />
            </template>
            <template v-else-if="params.currentComponent === 'Privacy'">
                <juheh5-privacy v-model="params" />
            </template>
            <template v-else>
            </template>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                return {
                    gameLoginConfig: @json($game_login_config),
                    isH5Login: 0, // H5是否已完成登录
                    h5LoginData: {}, // H5登录成功返回数据
                    isH5CheckPhoneBind: 0, // H5是否处理完绑定手机逻辑
                    isH5CheckIdcardBind: 0, // H5是否处理完实名逻辑
                    params: {
                        gameId: {{ $game->game_id }},
                        currentComponent: '',
                        currentComponentTab: '',
                        lastComponent: '',
                        lastComponentTab: '',
                        generateAccount: true,
                    },
                }
            },
            mounted() {
                // 处理H5账号登录回调
                var juheh5Cb = {
                    loginCb: this.h5LoginCb,
                    phoneBindCb: this.h5PhoneBindCb,
                    idcardBindCb: this.h5IdcardBindCb,
                }
                window.juheh5Cb = juheh5Cb

                this.getLocalAccountStorage();
            },
            methods: {
                getLocalAccountStorage() {
                    let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                    if (localAccountInfo.length === 0) {
                        this.params.currentComponent = 'Login'
                        this.params.currentComponentTab = 'PASSWORD_LOGIN';
                    } else {
                        this.params.currentComponent = 'AccountSelectLogin';
                    }
                },
                // 展示H5实名认证
                showH5IdcardBind() {
                    const _this = this
                    if (_this.isH5CheckIdcardBind == 1) {
                        return
                    }
                    _this.isH5CheckIdcardBind = 1

                    if (_this.isH5Login != 1) {
                        return
                    }
                    // 如果已经实名
                    if (_this.h5LoginData.idcard != '') {
                        return
                    }
                    // 配置是否弹出实名
                    if (_this.gameLoginConfig.need_idcard != 1) {
                        return
                    }

                    _this.params.currentComponent = 'IdcardAuthenticate'
                    _this.params.currentComponentTab = ''

                    return true
                },
                // 展示H5绑定手机
                showH5PhoneBind() {
                    const _this = this
                    if (_this.isH5CheckPhoneBind == 1) {
                        return
                    }
                    _this.isH5CheckPhoneBind = 1

                    if (_this.isH5Login != 1) {
                        return
                    }
                    // 如果已经绑定手机
                    if (_this.h5LoginData.phone != '') {
                        return
                    }
                    // 配置是否弹出绑定手机
                    if (_this.gameLoginConfig.show_bind_phone != 1) {
                        return
                    }

                    _this.params.currentComponent = 'BindPhone'
                    _this.params.currentComponentTab = ''

                    return true
                },
                h5LoginCb(code, msg, data) {
                    const _this = this
                    if (code !== 0) {
                        layer.msg(msg, { time: 1000 })
                        return
                    }
                    data = JSON.parse(data);

                    _this.isH5Login = 1
                    _this.h5LoginData = data

                    _this.loginCbToApk()
                },
                h5PhoneBindCb(code, msg, data) {
                    const _this = this
                    _this.params.currentComponent = ''
                    _this.params.currentComponentTab = ''

                    data = JSON.parse(data)
                    if (Object.keys(data).length != 0) {
                        _this.h5LoginData = data
                    }

                    _this.loginCbToApk()
                },
                h5IdcardBindCb(code, msg, data) {
                    const _this = this
                    _this.params.currentComponent = ''
                    _this.params.currentComponentTab = ''

                    data = JSON.parse(data)
                    if (Object.keys(data).length != 0) {
                        _this.h5LoginData = data
                    }

                    _this.loginCbToApk()
                },
                // 回调给安卓
                loginCbToApk() {
                    const _this = this
                    if (_this.showH5IdcardBind()) {
                        return
                    }

                    if (_this.showH5PhoneBind()) {
                        return
                    }

                    let cbdata = {
                        token: _this.h5LoginData.token,
                        user_id: _this.h5LoginData.openid,
                        time: _this.h5LoginData.last_login_time,
                        sign: _this.h5LoginData.sign,
                    }
                    if (window.Juheh5) {
                        window.Juheh5.loginCb(0, 'success', JSON.stringify(cbdata))
                    }
                }
            }
        })
        app.component('Juheh5FastLogin', vueComponents.Juheh5FastLogin)
        app.component('Juheh5Login', vueComponents.Juheh5Login)
        app.component('Juheh5PhoneReg', vueComponents.Juheh5PhoneReg)
        app.component('Juheh5AccountReg', vueComponents.Juheh5AccountReg)
        app.component('Juheh5FastReg', vueComponents.Juheh5FastReg)
        app.component('Juheh5BindPhone', vueComponents.Juheh5BindPhone)
        app.component('Juheh5RetrievePassword', vueComponents.Juheh5RetrievePassword)
        app.component('Juheh5AccountSelectLogin', vueComponents.Juheh5AccountSelectLogin)
        app.component('Juheh5IdcardAuthenticate', vueComponents.Juheh5IdcardAuthenticate)
        app.component('Juheh5Privacy', vueComponents.Juheh5Privacy)
        app.mount('#vapp')
    })
</script>

</html>
